<template>
  <div id="del">
    <div class="warp">
      <h3>用户系统注册</h3>
      <form>
        <div class="group">
          <div v-show="!myname" class="groupTip">请输入名字</div>
          <label>
            <p>*姓名：</p>
            <input type="text" v-model="myname" />
          </label>
        </div>

        <div class="group">
          <div v-show="isphone" class="groupTip">请输入正确手机号</div>
          <label>
            <p>*手机号码（作为系统用户名）：</p>
            <div class="phone">
              <input type="text" v-model="phone" @keyup="myphone" />
              <div>
                <input type="text" placeholder="请输入验证码" /><span
                  >发送验证码</span
                >
              </div>
            </div>
          </label>
        </div>
        <div class="group">
          <div v-show="issame" class="groupTip">两次密码输入不一致</div>
          <div v-show="password" class="groupTip">密码不符合规范</div>
          <label class="cipher">
            <p>*考生系统密码：</p>
            <input
              type="text"
              v-model="num"
              @keyup="cypher"
              placeholder="密码，至少8位，需包含字母和数字"
            />
            <input
              type="text"
              v-model="sum"
              @keyup="thesame"
              placeholder="重复输入密码"
            />
            <span>密码通过MD5加密存储，不会对任何人公开</span>
          </label>
        </div>
        <div class="group">
          <div v-show="!check" class="groupTip">请选择你的部门</div>
          <p>*所属部门</p>
          <div class="hobby">
            <label
              class="hobbyItem"
              v-for="(value, index) in division"
              :key="index"
            >
              <input type="radio" v-model="check" :value="value" /> {{ value }}
            </label>
          </div>
        </div>
        <!-- 打印 -->
        <button @click="registerUser" type="button">点击完成注册</button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      division: ["研发", "市场", "客服", "销售", "后勤"],
      myname: " ",
      phone: "",
      num: "",
      sum: "",
      isphone: false,
      password: false,
      issame: false,
      check: true,
    };
  },
  methods: {
    myphone() {
      this.isphone = !/^1[3-9]\d{9}$/.test(this.phone);
    },
    cypher() {
      this.password = !/^(?=.*[a-zA-Z])(?=.*\d).{8,}$/.test(this.num);
    },
    thesame() {
      this.issame = this.num != this.sum;
    },
    registerUser() {
      
      const formData = {
        名字: this.myname,
        手机号码: this.phone,
        密码: this.num,
        部门: this.check,
      };
      console.table(formData);
    },
  },
};
</script>

<style  scoped lang="scss">
.warp {
  width: 600px;
  height: 800px;
  position: relative;
  background-color: rgb(93, 124, 133);
  margin: 0 auto;
  display: flex;
  padding: 0px 20px;
  flex-direction: column;
  .group {
    margin-bottom: 50px;
    position: relative;
    .groupTip {
      width: 100%;
      height: 30px;
      background-color: rgb(255, 149, 149);
      position: absolute;
      left: 0px;
      bottom: -40px;
      line-height: 30px;
      font-size: 14px;
      color: red;
    }
  }
  span {
    font-size: 12px;
  }
  input {
    outline: none;
    height: 30px;
    border: 0.5px solid #ccc;
  }
  h3 {
    text-align: center;
  }
  button {
    display: block;
  }
  .phone {
    input {
      width: 300px;
    }
    div {
      display: flex;
      width: 305px;
      align-items: center;
      text-align: center;
      border: 0.5px solid #ccc;
      input {
        width: 200px;
        border: 0px;
      }
      span {
        width: 100px;
        height: 32px;
        line-height: 30px;
        border-left: 0.5px solid #ccc;
        background-color: #e1e0e0;
      }
    }
  }
  .cipher {
    display: flex;
    flex-direction: column;
    input {
      width: 300px;
    }
  }
  button {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100px;
    height: 30px;
  }
  .hobby {
    display: flex;
    flex-wrap: wrap;
    .hobbyItem {
      width: 260px;
      display: flex;
      align-items: center;
    }
  }
}
</style>